<template >
<!--    显示一个购物车列表，并且每个项目旁边都有一个复选框供用户选择。-->
<!--    此外，还有一个全选框和一个底部提交订单导航栏-->
    <van-nav-bar
        title="购物车"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
    />
    <van-divider :style="{ color: '#ee0a24', borderColor: '#1989fa', padding: '0 16px' }">
    </van-divider>
    <div class="car-list">
    <van-row v-for="car of carList">
        <van-col span="2" class="check-wrapper">
            <van-checkbox v-model="car.isChecked" @change="handleCheckedAllStatus" icon-size="24px"></van-checkbox>
        </van-col>
        <van-col span="6">
            <van-image
                height="60px"
                width="60px"
                fit="fill"
                :src="car.foodMainImage"
            />
        </van-col>
        <van-col span="10">
            <div class="name">{{ car.foodName }}</div>
            <div class="price">￥{{car.foodPrice}}</div>
        </van-col>
        <van-col span="6" class="count-wrapper">
            <van-stepper v-model="car.quantity" :name="car.id" theme="round" button-size="22" disable-input
            @change="handleQuantityChange"/>
        </van-col>
    </van-row>
<!--底部提交订单导航栏-->
    <van-submit-bar :price="totalPrice" button-text="结算" @submit="onSubmit">
        <van-checkbox v-model="isCheckedAll" @change="handleAllIn" >全选</van-checkbox>
    </van-submit-bar>

</div>
</template>

<script>
import {showDialog, showToast} from 'vant';
import { createApp } from 'vue';

export default {
    name: "list",
    data(){
        return{
            isCheckedAll:'',
            carList:[],

        }
    },
    computed:{
    totalPrice(){
    let num = 0;
    for(let car of this.carList){
      num += car.foodPrice * car.quantity;
    }
    return num*100;
    }
   },
    methods:{
        _initCarList(){
            this.$axios.get('/ele_server/car/list').then(({ data:res }) => {
                console.log(res);
                if(res.status == 0){
                   this.carList=res.data

               }else if(res.status == 3003){
                   showDialog({
                       title: '提示',
                       message: '当前未登录',
                       theme: 'round-button',
                       confirmButtonText:'去登录'
                   }).then(() => {

                       this.$router.push('/user/login?redirect=/car/list');
                   });
               }else{

               }
            })
        },
        onClickLeft(){
            this.$router.back()
        },
        handleQuantityChange(quantity,obj){
         //向服务器端发送axios请求
            this.$axios.get(`/ele_server/car/updateQuantity?id=${obj.name}&quantity=${quantity}`).then(({data:res})=>{
            if(res.status==0){
                showToast("数量修改成功")
            }
            })
        },
        handleAllIn(checked){
        for(let car of this.carList){
            car.isChecked=checked
         }
        },
        handleCheckedAllStatus(){
            let count=0
            for(let car of this.carList){
                if(car.isChecked){
                    count++
                }
            }
            if(count==this.carList.length){
                this.isCheckedAll=true
            }else{
                this.isCheckedAll=false
            }
        },
        onSubmit(){
            //判断选了几个
            let checkedCarList=[]
            for (let car of this.carList){
                if(car.isChecked){
                    //向数组添加元素
                    checkedCarList.push(car)
                }
            }
            if(checkedCarList.length != 0){
                //将选中数据存入vuex中
                // this.$store.commit('setCheckedCarList','CheckedCarList')
                //将选中数据存入本地
                localStorage.setItem('setCheckedCarList',JSON.stringify(checkedCarList))
                //Vue Router的用法 跳转到新的页面
                this.$router.push('/order/confirm')
            }else {
                showToast("请至少选择一条")
            }
        }
    },
    created(){
        this._initCarList()
    }
}
</script>

<style scoped lang="stylus">
.car-list
    .van-row
        margin 10px 0
        .check-wrapper,.count-wrapper
            display flex
            justify-content center
            align-items center

</style>

